* {margin: 0; padding: 0}
.clear-mp {margin: 0; padding: 0}

a {text-decoration: none}

.table {margin: 8px 0;font-family: verdana,arial,sans-serif;font-size:14px;color:#333333;border: 1px solid #ddd;border-collapse: collapse;}
.table th {padding: 8px;border: 1px solid #ddd;background-color: #f8f8f8; word-break: break-word;}
.table td {padding: 8px;border: 1px solid #ddd;background-color: #ffffff; word-break: break-word;}
tr:hover td{background-color:#f1f5fb;}

.flex-col-between {display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between;}
.flex-col-start {display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-start;}
.flex-col-top {display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-start;}
.flex-col-end {display: -webkit-flex; display:flex;flex-direction:column;justify-content:flex-end}
.flex-col-bottom {display: -webkit-flex; display:flex;flex-direction:column;justify-content:flex-end}
.flex-col-center {display: -webkit-flex; display: flex; flex-direction: column; justify-content: center;}
.flex-col-around {display: -webkit-flex;display: flex;flex-direction: column;justify-content: space-around;}
.flex-row-between {display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between;}
.flex-row-start {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-start;}
.flex-row-end {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-end;}
.flex-row-left {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-start;}
.flex-row-right {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-end;}
.flex-row-center {display: -webkit-flex; display: flex; flex-direction: row; justify-content: center;}
.flex-row-around {display: -webkit-flex;display: flex;flex-direction: row;justify-content: space-around;}
.flex-alignitems-start {align-items: flex-start}
.flex-alignitems-top {align-items: flex-start;}
.flex-alignitems-bottom {align-items: flex-end;}
.flex-alignitems-center {align-items: center;}
.flex-alignitems-stretch {align-items: stretch;}
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}
.flex-grow1 {flex-grow: 1;}

.height-r90 {height: 90%}
.height-r100 {height: 100%}
.height-v100 {height: 100vmax}
.height-100 {height: 100px;}
.height-90 {height: 90px;}
.height-60 {height: 60px}
.height-50 {height: 50px;}
.height-40 {height: 40px;}
.height-30 {height: 30px;}
.height-25 {height: 25px;}
.height-max-300 {max-height: 300px}

.width-200 {width: 200px}
.width-150 {width: 150px}
.width-100 {width: 100px}
.width-18 {width: 18px;}
.width-20 {width: 20px;}
.width-30 {width: 30px;}
.width-40 {width: 40px;}
.width-50 {width: 50px;}
.width-90 {width: 90px;}
.width-20 {width: 20px}
.width-r20 {width: 20%}
.width-r30 {width: 30%}
.width-r50 {width: 50%}
.width-r70 {width: 70%}
.width-r80 {width: 80%}
.width-r90 {width: 90%}
.width-r95 {width: 95%}
.width-r100 {width: 100%}
.width-min-90 {min-width: 90px}
.width-min-100 {min-width: 100px}
.width-max-100 {max-width: 100px}
.width-max-200 {max-width: 200px}

.margin-3 {margin:3px;}
.margin-5 {margin:5px;}
.margin-8 {margin:8px;}
.margin-x3 {margin: 0 3px}
.margin-x5 {margin: 0 5px}
.margin-x8 {margin: 0 8px}
.margin-y3 {margin: 3px 0}
.margin-y8 {margin: 8px 0}
.margin-y5 {margin: 5px 0}
.margin-y10 {margin: 10px 0}
.margin-t8 {margin-top: 8px;}
.margin-t15 {margin-top: 15px;}
.margin-t20 {margin-top: 20px;}
.margin-t50 {margin-top: 50px;}
.margin-t100 {margin-top: 100px;}
.margin-l4 {margin-left: 4px;}
.margin-l8 {margin-left: 8px;}
.margin-b8 {margin-bottom: 8px;}
.margin-b10 {margin-bottom: 10px;}
.margin-b15 {margin-bottom: 15px;}
.margin-b20 {margin-bottom: 20px;}
.margin-b100 {margin-bottom: 100px;}


.padding-y3 {padding: 3px 0;}
.padding-y5 {padding: 5px 0;}
.padding-y8 {padding: 8px 0;}
.padding-x8 {padding: 0 8px;}
.padding-x5 {padding: 0 5px;}
.padding-x3 {padding: 0 3px}
.padding-l2 {padding-left: 2px}
.padding-t10 {padding-top: 10px}
.padding-5 {padding: 5px;}
.padding-8 {padding: 8px;}
.padding-3-8 {padding: 3px 8px;}

.color-grey {background-color: #e0e0e0}
.overflow-scroll {overflow: scroll}
.overflow-hidden {overflow: hidden}
.scroll-x {overflow-x: scroll; white-space: nowrap;}
.scroll-x::-webkit-scrollbar {display:none}
.scroll-y {overflow-y: scroll; white-space: nowrap;}
.scroll-y::-webkit-scrollbar {display:none}
.scroll {white-space: nowrap; overflow: scroll;}
.scroll::-webkit-scrollbar {display: none;}

.font-s10 {font-size: 10px}
.font-s12 {font-size: 12px;}
.font-s13 {font-size: 13px;}
.font-s14 {font-size: 14px;}
.font-s16 {font-size: 16px;}
.font-s18 {font-size: 18px;}
.font-s20 {font-size: 20px;}
.font-s25 {font-size: 25px;}
.font-s40 {font-size: 40px;}
.font-color-gray {color: #e0e0e0}
.font-c-grey {color: #888}
.font-c-origen {color: #FF9800}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.word-warp {word-break: break-all;}
.text-over-hidden{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;}
.block-center {text-align: center; line-height: 100%}

.color-grey {background-color: #e0e0e0}
.bg-color-grey {background-color: #e0e0e0}

.hide {display: none}

.gap {width: 100%; height: 10px;}
.gapbar {width: 100%;background-color: #f8f8f8;height: 10px;}
.gb-f8 {background-color: #f8f8f8;}

.shadow-3 {
    box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
}

.shadow-4 {
    box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.2);
}


.image-small-box {border-radius: 3px;overflow: hidden;width: 90px;height: 90px;margin: 3px; text-align: center}
.image-small {height: 90px;}
.image-middle-box {border-radius: 3px;overflow: hidden;width: 200px;height: 200px;margin: 3px; text-align: center}
.image-middle {height: 200px;}
.image-big-box {border-radius: 3px;overflow: hidden;width: 300px;height: 300px;margin: 3px; text-align: center}
.image-big {height: 300px;}

.border-1-grey {border: 1px solid #e0e0e0}
.border-1-origen {border: 1px solid #FF9800;}
.border-radius-5 {border-radius: 5px;}
.border-radius-10 {border-radius: 10px;}
.border-left {border-left: 1px solid #c8c8c8}
.border-right {border-right: 1px solid #c8c8c8}
.border-top {border-top: 1px solid #c8c8c8}
.border-bottom {border-bottom: 1px solid #c8c8c8}
.radius-2 {border-radius: 2px}
.radius-3 {border-radius: 3px}
.radius-5 {border-radius: 5px}

.block {padding: 3px; margin: 3px; color: #666}
.block:hover {background-color: #c8c8c8}

.goods-attr {margin-right: 5px;margin-bottom: 5px;font-size: 10px;}

.fix-bottom-target {position: fixed;bottom: 3px;height: 3px}

.icon-up-arrow {background-image: url('/sys/icons/up-arrow.png'); background-size: 100% 100%; background-repeat: no-repeat;}
.icon-down-arrow {background-image: url('/sys/icons/down-arrow.png'); background-size: 100% 100%; background-repeat: no-repeat;}
.icon-right-arrow {background-image: url('/sys/icons/right-arrow.png'); background-size: 100% 100%; background-repeat: no-repeat;}

/*可展开的面板*/
.panel-list {padding: 2px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;}
.panel-box { border-bottom: 1px solid #c8c8c8;}
.panel-title {display: flex;flex-direction: row;justify-content: space-between; align-items: center; padding: 5px;}
.panel-title-idx {max-width: 50px;overflow-x: scroll; padding: 3px 0;}
.panel-title-idx::-webkit-scrollbar {display: none;}
.panel-title-name {flex-grow: 1;overflow-x: scroll; padding: 3px 0; margin-left: 8px;}
.panel-title-name::-webkit-scrollbar {display: none;}
.panel-title-icon {width: 18px;}
.panel-body {padding: 5px;margin-top: 3px;}
.panel-footer {padding: 5px;display: none;}

/*一行多列, 带图标的列表*/
.list {display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-start;align-items: stretch;}
.list-item {display: -webkit-flex; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #c8c8c8; padding: 20px 5px 5px 5px;}
.list-item-title {}
.list-item-body {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-start; align-items: center}
.list-item-desc {flex-grow: 1; display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-end; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
.list-item-action {width: 18px;}

/* 一行两列, 仅文字信息, 两边对齐, 也可以自己给 item-between 添加样式决定其占用宽度 */
.info-list {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 100%}
.info-list .item-between {overflow-x: scroll; margin:5px 2px;}
.info-list .item-between::-webkit-scrollbar {display:none}
.info-list .item-between:nth-child(odd) {text-align: left; width: 49%;}
.info-list .item-between:nth-child(even) {text-align: right; width: 49%;}

/* 一行两列, 仅文字信息, 中间对齐, 也可以自己给 item-between 添加样式决定其占用宽度 */
.info-list .item-center {overflow-x: scroll; margin:5px 2px;}
.info-list .item-center::-webkit-scrollbar {display:none}
.info-list .item-center:nth-child(odd) {text-align: right; width: 49%;}
.info-list .item-center:nth-child(even) {text-align: left; width: 49%;}

.tab-box {display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-start;align-items: stretch; margin: 5px 0;}
.tab-x-title {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; height: 35px}
.tab-x-title-item { flex-grow: 1; text-align: center; height: 35px; line-height: 35px;}
.tab-content {display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-start;align-items: stretch;}
.tab-x-content-item {min-height: 150px;}

.scroll-title-box {width: 100%; overflow-x: scroll; margin-bottom: 8px}
.scroll-title-box::-webkit-scrollbar {display:none}
.scroll-title-list {white-space: nowrap; margin: 5px 0;}
.scroll-title-item {padding: 5px; margin: 3px 5px; max-width: 150px;}
.scroll-title-item:hover {background-color: #F0F0F0;}

.btn-16 {height: 16px; line-height: 16px; padding: 0 8px; font-size:  8px; border-radius: 5px; text-align: center;}
.btn-20 {height: 20px; line-height: 20px; padding: 0 8px; font-size: 10px; border-radius: 5px; text-align: center;}
.btn-24 {height: 24px; line-height: 24px; padding: 0 8px; font-size: 12px; border-radius: 5px; text-align: center;}
.btn-28 {height: 28px; line-height: 28px; padding: 0 8px; font-size: 14px; border-radius: 5px; text-align: center;}
.btn-30 {height: 30px; line-height: 30px; padding: 0 8px; font-size: 15px; border-radius: 5px; text-align: center;}
.btn-32 {height: 32px; line-height: 32px; padding: 0 8px; font-size: 16px; border-radius: 5px; text-align: center;}
.btn-40 {height: 40px; line-height: 40px; padding: 0 8px; font-size: 20px; border-radius: 5px; text-align: center;}
.btn-50 {height: 50px; line-height: 50px; padding: 0 8px; font-size: 25px; border-radius: 5px; text-align: center;}

.input-text{border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid #e7e7e7; width: 100%; height: 25px;}

.bg-white {background-color: white;}
.bg-green {background-color: #4CAF50;}
.bg-blue {background-color: #008CBA;}
.bg-red {background-color: #f44336;}
.bg-gray {background-color: #e7e7e7;}
.bg-black {background-color: #555555;}

.border-green {border: 1px solid #4CAF50;}
.border-blue {border: 1px solid #008CBA;}
.border-red {border: 1px solid #f44336;}
.border-gray {border: 1px solid #e7e7e7;}
.border-black {border: 1px solid #555555;}

.tags-wap {display: -webkit-flex; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; overflow-y: scroll}
.tags-wap::-webkit-scrollbar {display: none;}
.tags-wap .item {border-radius: 3px; margin: 0 5px 3px 0;}
